<template>
  <van-nav-bar
    title="购物车"
    left-text="返回"
    left-arrow
    @click-left="
      () => {
        $router.push('/');
      }
    "
  />
  <van-empty
    v-if="!usercarts.length"
    image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
    image-size="80"
    description="描述文字"
  />
  <div v-else>
    <van-swipe-cell v-for="item in usercarts">
      <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
        <template #thumb>
          <van-checkbox v-model="item.checked"></van-checkbox>
          <van-image
            width="100"
            height="100"
            :src="item.goods.goods_big_logo"
          />
        </template>
        <template #num>
            <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
        </template>
      </van-card>
      <template #right>
        <van-button square text="删除" @click="delCart(item.id)" type="danger" class="delete-button" style="height: 100%;"/>
      </template>
    </van-swipe-cell>
  </div>

  <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allchecked">全选</van-checkbox>
</van-submit-bar>

</template>

<script setup>
import { computed, ref } from "vue";
import { useCounterStore } from "@/store/cart";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore();
let usercarts = ref([]);
const cartData = () => {
  let username = localStorage.getItem("username");
  usercarts.value = store.carts.filter((item) => item.username == username);
};
cartData();

const delCart=(id)=>{
    store.delCart(id)
    cartData()
}

const allchecked=computed({
    get(){
        if(usercarts.value.length==0){
            return false
        }
        else{
            return usercarts.value.every(item=>item.checked)
        }
    },
    set(val){
        usercarts.value.filter(item=>item.checked=val)
    }
})

const allprice=computed(()=>{
    let allprice=0
    let cartok=usercarts.value.filter(item=>item.checked)
    cartok.forEach((item=>{
        allprice+=item.number*item.goods.goods_price
    }))
    return allprice*100
})


import { showToast } from "vant";
import {orderApi} from '@/api/api'
import { useRouter } from "vue-router";
let router=new useRouter()

const onSubmit=()=>{
    let orderok=usercarts.value.filter(item=>item.checked)
    if(!orderok.length){
        showToast({
            type:'fail',
            message:'请选择商品',
            duration:2000
        })
    }
    else{
        let orderok=usercarts.value.filter(item=>item.checked)
         console.log('生成订单',orderok)
        orderApi({
            goodsIds:orderok.map(item=>item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:orderok[0].goods.goods_name+'等'+orderok.length+'件商品',
            totalPrice:allprice.value,
            nums:orderok.map(item=>item.number).join(',')
        }).then((res)=>{
            console.log('生成订单数据',res)
            if(res.data.code==0){
                showToast({
                    type:'success',
                    message:'提交订单',
                    duration:2000,
                    onClose(){
                        router.push('/order/'+res.data.data.orderId)
                    }
                })
            }
        })
    }
}
</script>

<style lang="scss" scoped></style>
